<template>
    <div>
        <Header/>
        <div class="m-blog">
            <h2>{{blog.title}}</h2>
            <el-link icon="el-icon-edit" v-if="isMyBlog">
                <router-link :to="{name: 'BlogEdit', params: {blogId: blog.id}}">
                    编辑
                </router-link>
            </el-link>

            <el-divider></el-divider>

            <div class="markdown-body" v-html="blog.content"></div>

        </div>

    </div>
</template>

<script>
    import Header from "../components/Header";

    // import "github-markdown-ccs/github-markdown.css";
    import 'mavon-editor/dist/markdown/github-markdown.min.css';

    export default {
        name: "BlogDetail",
        data() {
            return {
                blog: {
                    id: '',
                    title: '',
                    content: "",
                },
                isMyBlog: false
            };
        },
        created() {
            // 通过路由中的url地址栏来去当前用户id
            const blodId = this.$route.params.blogId;
            const _this = this;
            // 回显数据到那条博客
            this.$axios.get("/blog/" + blodId).then(res => {
                const blog = res.data.data;
                console.log(res.data.data);
                _this.blog.id = blog.id;
                _this.blog.title = blog.title;

                // 渲染markdown
                var MarkdownIt = require("markdown-it");
                var md = new MarkdownIt();
                var render = md.render(blog.content);

                // 渲染之后赋值
                _this.blog.content = render;

                // 判断当前登录的用户是否是博主本人
                _this.isMyBlog = (blog.userId === _this.$store.getters.getUser.id);

            }).catch((e) => {
                console.log(e)
            })

        },
        methods: {},

        components: {Header},

        computed: {},
    };
</script>

<style lang="less" scoped>

    .m-blog {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        width: 100%;
        min-height: 700px;
        padding: 20px 15px;
    }
</style>
